<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<HEAD>
    <TITLE> ZTREE DEMO - big data common</TITLE>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" th:href="@{/common/zTree_v3/css/demo.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/common/zTree_v3/css/zTreeStyle/zTreeStyle.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/common/SyntaxHighlighter/styles/shCore.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/common/SyntaxHighlighter/styles/shThemeDefault.css}" type="text/css">

    <script type="text/javascript" th:src="@{/common/zTree_v3/js/jquery-1.4.4.min.js}"></script>
    <script type="text/javascript" th:src="@{/common/zTree_v3/js/jquery.ztree.core.js}"></script>
    <script type="text/javascript" th:src="@{/common/zTree_v3/js/jquery.ztree.excheck.js}"></script>
    <script type="text/javascript" th:src="@{/common/zTree_v3/js/jquery.ztree.exedit.js}"></script>
    <script type="text/javascript" th:src="@{/common/SyntaxHighlighter/scripts/XRegExp.js}"></script>
    <script type="text/javascript" th:src="@{/common/SyntaxHighlighter/scripts/shCore.js}"></script>
    <script type="text/javascript" th:src="@{/common/SyntaxHighlighter/scripts/shBrushJava.js}"></script>
    <script type="text/javascript" th:src="@{/common/SyntaxHighlighter/scripts/shBrushJScript.js}"></script>
    <script type="text/javascript" th:src="@{/common/SyntaxHighlighter/scripts/shBrushSql.js}"></script>
    <script type="text/javascript" th:src="@{/common/showdown/showdown.min.js}"></script>
    <SCRIPT type="text/javascript">
        <!--
        var setting = {
            callback:{
                onMouseUp: onMouseUp
            }
        };
        function onMouseUp(event, treeId, treeNode) {
            if (treeNode){
                change(treeNode.id);
            }
        }

        var dataMaker = function(count) {
            $.ajax({
                url:'http://192.168.56.1:8888/ws/getMigrationNode',
                type:'post',
                dataType: 'JSON',
                contentType: 'application/json',
                success:function (data) {
                    var obj=JSON.parse(data);
                    // alert(obj.data.name);
                    var zNodes =[];
                    setNode(zNodes,JSON.parse(obj.data));
                    $("#treeDemo").empty();
                    $.fn.zTree.init($("#treeDemo"), setting, zNodes);//创建树形列表
                }
            });
        }

        function  setNode(znode,obj) {
            $.each(obj,function (i,val) {
                var node=new Object();
                node.name=val.name;
                node.id=val.id;
                znode.push(node);
            })
        }

        function change(id) {

            $.ajax({
                url:"http://192.168.56.1:8888/ecco/migrationdetail",
                type:"get",
                data: {id:id},
                success:function (data) {
                    document.getElementById("detail").innerHTML = data;
                    SyntaxHighlighter.highlight();//设置代码高亮
                }
            })
        }

        $(document).ready(function(){
            $("#createTree").bind("click", dataMaker);
            $("#change").bind("click",change);

        });
        //-->
    </SCRIPT>
</HEAD>

<BODY>
<div>
    <div style="position: absolute;width: 250px">
        <div>
            <div style=" float: left; width: 150px;">
                <select>
                    <option>3.1.0</option>
                    <option>3.2.0</option>
                    <option>3.6.0</option>
                    <option>4.0.0</option>
                    <option>4.2.0</option>
                    <option>4.9.0</option>
                </select>
                migrate to
            </div>
            <div>
                <select>
                    <option>3.2.0</option>
                    <option>3.6.0</option>
                    <option>4.0.0</option>
                    <option>4.2.0</option>
                    <option>4.9.0</option>
                </select>
            </div>
            [ <a id="createTree" href="#" title="初始化结果" onclick="return false;">初始化结果</a> ]
        </div>
        <div>
            <ul id="treeDemo" class="ztree"></ul>
        </div>
    </div>
        <div id="detail" style="position: absolute;left: 250px;margin-left: 10px;">
<!--        <div id="right" style="position: absolute;left: 750px;margin-left: 10px;">-->
<!--            <h1>3.2.0</h1>-->
<!--        </div>-->
    </div>
</div>
</BODY>
<script type="text/javascript">
    SyntaxHighlighter.defaults['toolbar'] = false;
    SyntaxHighlighter.all();
</script>
</HTML>